<template>
  <div v-if="!loading">
    <Row>
      <Col span="14" class="border">
        <Checkbox v-model="single" @on-change="onChange" style=" margin-left: 20px;margin-bottom: 8px;"
          ><span style=" margin-left: 10px;">{{ single ? '全不选' : '全选' }}</span></Checkbox
        >
        <Tree
          :data="treeData"
          show-checkbox
          expand-node
          @on-check-change="onCheckChange"
          style="border-top: 1px solid #e5e9ee;"
        ></Tree>
      </Col>
      <Col span="10" class="border">
        <div>已选择组织：{{ orgs.length }}个<Button type="text" icon="ios-close" @click="clear">清空</Button></div>
        <Tag v-for="item in orgs" :key="item.orgId" :name="item" closable @on-close="handleClose" type="border">{{
          item.orgName
        }}</Tag>
      </Col>
    </Row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    orgDatas: { type: Array, default: () => [] }
  },
  computed: {
    ...mapState(['orgList'])
  },
  data() {
    return {
      loading: false,
      single: false,
      treeData: [],
      orgs: [],
      actions: [
        // {
        //   text: '全选',
        //   theme: 'primary',
        //   handle: () => {
        //     this.orgs = []
        //     this.traverseTree(this.treeData, node => {
        //       node.checked = true
        //       this.orgs.push(node)
        //     })
        //   },
        //   loading: false
        // },
        {
          text: '确定',
          theme: 'primary',
          handle: () => {
            this.$emit('Close', this.orgs)
          },
          loading: false
        },
        {
          text: this.$t('common.close'),
          handle: () => {
            this.$emit('Close')
          }
        }
      ]
    }
  },
  watch: {
    orgList(newValue, oldValue) {
      this.dealTreeData(newValue)
    },
    orgs(newValue, oldValue) {
      this.single = this.orgs.length == this.treeData.length
    }
  },
  mounted() {
    if (this.orgDatas.length <= 0) {
      this.loading = true
      this.$store.dispatch('getOrgList')
    } else {
      this.dealTreeData(this.orgDatas)
    }
  },
  created() {
    this.$emit('SetTitle', '选择组织')
    this.$emit('SetPageWidth', 600)
    this.$emit('SetPageMinHeight', 400)
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    dealTreeData(orgData) {
      let data = JSON.parse(JSON.stringify(this.treeToFlat(orgData)))
      data.forEach(node => {
        node.checked = false
        node.title = node.orgName
      })
      data[0].children = []
      this.treeData = data
      this.loading = false
    },
    treeToFlat(tree, parentId = null) {
      let flat = []
      for (let node of tree) {
        let copy = { ...node, parentId }
        flat.push(copy)
        if (node.children && node.children.length > 0) {
          flat = flat.concat(this.treeToFlat(node.children, node.id))
        }
      }
      return flat
    },
    traverseTree(tree, callback) {
      if (!Array.isArray(tree)) {
        callback(tree)
        if (tree.children) {
          tree.children.forEach(child => {
            this.traverseTree(child, callback)
          })
        }
      } else {
        tree.forEach(node => {
          this.traverseTree(node, callback)
        })
      }
    },
    handleClose(event, org) {
      this.traverseTree(this.treeData, node => {
        if (org.orgId == node.orgId) {
          node.checked = false
          this.orgs = this.orgs.filter(item => item !== node)
        }
      })
    },
    onCheckChange(list, node) {
      this.orgs = list
    },
    clear() {
      this.traverseTree(this.treeData, node => {
        node.checked = false
      })
      this.orgs = []
    },
    onChange(selectAll) {
      if (selectAll) {
        this.selectAll()
      } else {
        this.clear()
      }
    },
    selectAll() {
      this.orgs = []
      this.traverseTree(this.treeData, node => {
        node.checked = true
        this.orgs.push(node)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.border {
  border: 1px solid #e5e9ee;
  height: 400px;
  padding: 8px;
  overflow-y: auto;
}
</style>
